<template>
  <div ref="container" :style="{ height: height }">
    <!-- 这里放置需要滚动的内容 -->
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
import PerfectScrollbar from 'perfect-scrollbar';
import 'perfect-scrollbar/css/perfect-scrollbar.css';

export default defineComponent({
  name: 'PerfectScrollbar',
  props: {
    // 组件的高度，支持传入不同的高度值
    height: {
      type: String,
      default: '100%'
    }
  },
  setup(props) {
    // 定义容器的引用
    const container = ref<HTMLElement | null>(null);
    // 定义滚动条实例
    let ps: PerfectScrollbar | null = null;

    onMounted(() => {
      if (container.value) {
        // 初始化滚动条
        ps = new PerfectScrollbar(container.value, {
            wheelSpeed: 0.5 // 根据需要调整此值
        });
      }
    });

    onBeforeUnmount(() => {
      if (ps) {
        // 销毁滚动条实例，防止内存泄漏
        ps.destroy();
        ps = null;
      }
    });

    return {
      container
    };
  }
});
</script>

<style scoped>
/* 可根据需要自定义滚动条样式 */
.ps__rail-y {
  opacity: 0.6;
}
</style>